<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/inc.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <title>ZK节点查看</title>
    <!--IE 使用最高版本-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="${ctx}/zTree/css/demo.css" type="text/css">
    <script>
        $(document).ready(function(){

        });
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes;

        var zTreeObj;

        // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
        var setting = {
            callback: {
                onClick: zTreeOnClick
            }
        };


        function zTreeOnClick(event, treeId, treeNode) {
//            alert(treeNode.tId + ", " + treeNode.name+ ", " + treeNode.clusterId);
            $.ajax({
                type : "get",
                url : ctx+"/getZkNodeData",
                async : false,//同步请求
                data:{clusterId:treeNode.clusterId,path:treeNode.name},
                dataType:"text",
                success : function(val){
                    $("#path2").val(treeNode.name);
                    $("#pathVal2").val(val);
                    $("#nextRow").show(800);
                },
                error:function(e){
                    badMood("获取节点数据失败！");
                }
            });
        };


        function addZkNode(){
            var flag = $("#flag").val();
            if(flag==''){
                badMood("请先连接一个 ZK 集群再添加节点！");
            }else {
                var path = $("#path").val().trim();
                var pathVal = $("#pathVal").val().trim();
                if (path==''){
                    badMood("路径为空！");
                    $("#path").val("");
                    $("#pathVal").val("");
                }else {
                    $.ajax({
                        type : "post",
                        url : ctx+"/addZkNode",
                        async : false,//同步请求
                        data:{clusterId:flag,path:path,pathVal:pathVal},
                        dataType:"text",
                        success : function(){
                            getNodes(flag,null);
                            $("#path").val("");
                            $("#pathVal").val("");
                        },
                        error:function(e){
                            badMood("添加节点失败！可能的原因：节点已经存在！");
                        }
                    });
                }
            }
        }

        function getNodes(clusterId,who){
            $("#treeDemo").html("");
            $.ajax({
                type : "get",
                url : ctx+"/data",
                async : false,//同步请求
                data:{clusterId:clusterId},
                dataType:"json",
                success : function(json){
                    $.fn.zTree.destroy("treeDemo");
                    zNodes = json;
                    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    $("#delAllNode").show(500);
                    if (who==null){
                    }else {
                        $("button[data='flag']").each(function(){
                            $(this).removeClass("btn-success");
                        });
                        $(who).addClass("btn-success");
                        $("#flag").val(clusterId);
                    }
                },
                error:function(e){
                    badMood("连接失败！");
                    $("#delAllNode").hide(500);
                }
            });
        }

        function clearConn(){
            $.ajax({
                type : "get",
                url : ctx+"/clearConn",
                async : false,//同步请求
                dataType:"text",
                success : function(){
                    $("#treeDemo").html("");
                    $("#delAllNode").hide(500);
                    goodMood("连接已清空，请重新连接 ZK 服务！");
                },
                error:function(e){
                    badMood("清空连接操作失败！");
                }
            });
        }

        function delAllNode(){
            layer.confirm('确定删除所有节点?', {icon: 3, title:'再次确认！'}, function(index){
                //确定
                var flag = $("#flag").val();
                $.ajax({
                    type : "get",
                    url : ctx+"/delAllNode",
                    async : false,//同步请求
                    data:{clusterId:flag},
                    dataType:"text",
                    success : function(){
                        getNodes(flag,null);
                    },
                    error:function(e){
                        badMood("删除所有节点失败！");
                        getNodes(flag,null);
                    }
                });
                layer.close(index);
            },function(index){
                //取消
                layer.close(index);
            });
        }


        function delZkNode(){
            var flag = $("#flag").val();
            var path = $("#path2").val();
            $.ajax({
                type : "post",
                url : ctx+"/delZkNode",
                async : false,//同步请求
                data:{clusterId:flag,path:path},
                dataType:"text",
                success : function(){
                    $("#nextRow").hide(800);
                    getNodes(flag,null);
                },
                error:function(e){
                    badMood("删除节点失败！");
                }
            });
        }


        function removeReadonly(who){
            $(who).removeAttr("readonly");
        }

        function addReadonly(who){
            var flag = $("#flag").val();
            var path = $("#path2").val();
            var pathVal = $("#pathVal2").val();
            $.ajax({
                type : "post",
                url : ctx+"/updateZkNode",
                async : false,//同步请求
                data:{clusterId:flag,path:path,pathVal:pathVal},
                dataType:"text",
                success : function(){
                },
                error:function(e){
                    badMood("更新节点数据失败！");
                }
            });
            $(who).attr("readonly","true");
        }
    </script>
</head>
<body>
    <input id="flag" type="hidden"/>
    <h1 style="margin-top: 20px;">ZK 集群数据查看</h1>
    <div class="container" style="margin-top: 20px;">
        <c:forEach items="${list}" var="item">
            <div class="row well well-sm">
                <div class="col-md-1">${item.clusterName}</div>
                    <div class="col-md-10">
                        <c:forEach items="${item.serverInfoList}" var="info">
                            <button class="btn btn-sm btn-default" disabled>${info.ip}:${info.port}</button>
                        </c:forEach>
                    </div>
                <div class="col-md-1"><button class="btn btn-default" data="flag" onclick="getNodes('${item.clusterId}',this)">连接</button></div>
            </div>
        </c:forEach>

        <div class="row" style="text-align: right">
            <button onclick="clearConn();" class="btn btn-success">清空连接</button>
            <button onclick="delAllNode();" style="display: none" class="btn btn-success" id="delAllNode">删除所有节点</button>
            <button onclick="window.location = '${ctx}/toManager'" class="btn btn-success">管理</button>
        </div>


        <div class="row">
            <div class="col-md-3">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div class="col-md-9 well well-sm" style="margin-top: 10px;">
                <div class="row">
                    <div class="col-md-9">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">路径</div>
                                    <input class="form-control" id="path" type="text" placeholder="输入 ZK 路径">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">值</div>
                                    <input class="form-control" id="pathVal" type="text" placeholder="输入路径对应的值">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-success" onclick="addZkNode();">添加节点</button>
                    </div>
                </div>

                <div class="row" style="margin-top: 20px;display: none" id="nextRow">
                    <div class="col-md-9">
                        <form class="form-inline" role="form">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">路径</div>
                                    <input class="form-control" disabled="disabled" id="path2" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">值</div>
                                    <input class="form-control" onfocus="removeReadonly(this)" value="aa" readonly = "true"
                                           onblur="addReadonly(this)" id="pathVal2" type="text" placeholder="输入路径对应的新值">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-3">
                        <button class="btn btn-success" onclick="delZkNode();">删除节点</button>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

